<template>
	<view class="VIPMall">
		<view class="VIPMall_top">
			<view class="VIPMall_top_header">
				<view @click="backReturn" class="VIPMall_top_header_back">
					<image src="../../../static/home/back_White.png" mode="widthFix"></image>
				</view>
				<view class="VIPMall_top_header_text">
					收藏列表
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="VIPMall_content" @scrolltolower="addmodle()">
			<view
				style="display: flex;justify-content: space-between;flex-wrap: wrap;padding: 32upx;padding-bottom: 0;">
				<view @click="detail(item.goodId)" v-for="(item,index) in List" class="VIPMall_content_list">
					<view class="VIPMall_content_list_image">
						<image :src="item.mainImages" mode=""></image>
					</view>
					<view class="VIPMall_content_list_content">
						<view class="VIPMall_content_list_content_title">
							{{item.name}}
						</view>
						<view class="VIPMall_content_list_content_center">
							<view class="VIPMall_content_list_content_center_left">
								平台VIP价
							</view>
							<view class="VIPMall_content_list_content_center_biaojia">
								￥
							</view>
							<view class="VIPMall_content_list_content_center_num">
								{{item.memberPrice}}
							</view>
							<view class="VIPMall_content_list_content_center_past">
								{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore style="width: 100%;" @loadmore="addmodle" :status="status" />
		</scroll-view>
	</view>
</template>

<script>
	import {
		bootgoodsselectpage,
		bootgoodsTypeselect,
		goodcollectionlist
	} from "@/api/home";
	export default {
		data() {
			return {
				val: '',
				status: "loadmore",
				queryInquire: {
					pageSize: 10,
					pageNum: 1,
				},
				loding: false,
				List: [],
				over: false,
				types: []
			}
		},
		created() {
			this.queryInquire.pageNum = 1
			this.List = []
			this.over = false
			this.status = 'loadmore'
			this.addmodle();
			// this.bootgoodsTypeselect()
		},
		// onShow() {
		// 	console.log(123)
		// 	this.over = false;
		// 	this.status = "loadmore";
		// 	this.addmodle();
		// },
		onReachBottom() {
			this.addmodle();
		},
		methods: {
			detail(id) {
				uni.navigateTo({
					url: '/pages/index/detail/detail?id=' + id
				});
			},
			clear(e) {
				this.queryInquire.name = '';
				this.queryInquire.pageNum = 1
				this.List = []
				this.over = false
				this.status = 'loadmore'
				this.addmodle();
			},
			search(e) {
				this.queryInquire.name = e;
				this.queryInquire.pageNum = 1
				this.List = []
				this.over = false
				this.status = 'loadmore'
				this.addmodle();
			},
			typeQuery(id) {
				if (this.queryInquire.typeId == id) {
					this.queryInquire.typeId = null
					this.queryInquire.pageNum = 1
					this.List = []
					this.over = false
					this.status = 'loadmore'
					this.addmodle();
				} else {
					this.queryInquire.typeId = id
					this.queryInquire.pageNum = 1
					this.List = []
					this.over = false
					this.status = 'loadmore'
				}
			},
			bootgoodsTypeselect() {
				bootgoodsTypeselect({}).then(res => {
					this.types = res.data
				})
			},
			addmodle() {
				if (this.over == true) {
					return;
				}
				if (this.status == "loadmore") {
					this.goodcollectionlist();
					console.log(89)
				}
			},
			goodcollectionlist() {
				this.status = "loading";
				goodcollectionlist(this.queryInquire)
					.then((res) => {
						if (res.success == 1) {
							this.List = this.List.concat(res.data.records);
							if (res.data.current == res.data.pages || (res.data.pages == 0)) {
								this.over = true;
								setTimeout(() => {
									this.status = "nomore";
								}, 0);
							} else {
								this.queryInquire.pageNum++;
							}
						}
					})
					.finally(() => {
						this.status = "loadmore";
					});
			},
			backReturn() {
				uni.navigateBack({
					// animationType: 'slide-out-right',
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.VIPMall {
		.VIPMall_top {
			padding-top: calc(8upx + var(--status-bar-height));
			background-image: linear-gradient(to right, #FE3D47, #FC773D);

			.VIPMall_top_header {
				padding: 10upx 0;
				position: relative;
				justify-content: center;
				display: flex;

				.VIPMall_top_header_back {
					padding: 0 32upx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);

					image {
						width: 18upx;
					}
				}

				.VIPMall_top_header_text {
					font-size: 34upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 48upx;
				}
			}

			.VIPMall_top_search {
				padding: 14upx 32upx;
			}

			.VIPMall_top_tabs {
				padding: 0 32upx;
				padding-bottom: 14upx;

				.VIPMall_top_tabs_overflwo {
					white-space: nowrap;
					overflow-y: hidden;

					.VIPMall_top_tabs_list {
						display: inline-block;
						margin-right: 32upx;
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40upx;
					}

					.VIPMall_top_tabs_list_active {
						// font-size: 32upx;
						// transform: scale(1.2);
						// transform-origin: center center;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 44upx;
					}
				}
			}
		}

		.VIPMall_content {
			width: 100%;
			height: calc(100vh - var(--status-bar-height) - 6upx - 220upx);
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-bottom: 0;

			.VIPMall_content_list {
				width: calc((100% - 26upx) / 2);
				margin-bottom: 26upx;

				.VIPMall_content_list_image {
					width: 100%;
					height: 302upx;
					border-radius: 16upx 16upx 0px 0px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.VIPMall_content_list_content {
					background-color: #FFFFFF;
					height: 160upx;
					border-radius: 0 0 16upx 16upx;
					padding: 16upx 20upx 10upx 20upx;

					.VIPMall_content_list_content_title {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.9);
						line-height: 40upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.VIPMall_content_list_content_center {
						display: flex;
						align-items: center;

						.VIPMall_content_list_content_center_left {
							font-size: 22upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.9);
							line-height: 32upx;
							white-space: nowrap;
						}

						.VIPMall_content_list_content_center_biaojia {
							font-size: 19.98upx;
							color: #ED2525;
						}

						.VIPMall_content_list_content_center_num {
							font-size: 34upx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #ED2525;
							line-height: 50upx;
							margin-right: 6upx;
						}

						.VIPMall_content_list_content_center_past {
							font-size: 22upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.5);
							line-height: 32upx;
							text-decoration: line-through;
						}
					}

					.VIPMall_content_list_content_bottom {
						display: flex;
						align-items: flex-end;

						.VIPMall_content_list_content_bottom_title {
							font-size: 22upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #ED2525;
							line-height: 32upx;
							margin-right: 10upx;
						}

						.VIPMall_content_list_content_bottom_bar {
							height: 44upx;
							border-radius: 12upx;
							border: 2upx solid #FFBE53;
							margin-right: 12upx;
							font-size: 22upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFBE53;
							line-height: 32upx;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 6upx 16upx;
							white-space: nowrap;

							&:last-child {
								margin: 0;
							}
						}
					}

				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #E3E5E8;
	}
</style>
